<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="../metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">

    <title>Test Chart - Metro 4 :: Popular HTML, CSS and JS library</title>

</head>
<body class="m4-cloak">
<div class="container">
    <h1>Chat test page</h1>

    <div>
        <div id="chat" class="mx-auto"
             data-role="chat"
             data-width="480"
             data-height="640"
             data-title="Direct chat"
             data-cls-send-button="success"
             data-random-color="true"
             data-welcome="Welcome to Metro 4 chat component!"
             data-cls-message-left="default"
             data-cls-message-right="bg-cyan fg-white bd-cyan"
             data-on-send="sendMessage"
             data-on-message="onMessage"
             data-avatar=""
             data-readonly="false"
        ></div>
    </div>

</div>

<script src="../metro/js/metro.js?ver=@@b-version"></script>
<script>
    var messages = [
        "Confucius says: vision and om."
        , "Be unconditional."
        , "Scholars, winds, and inward lovers will always protect them."
        , "The meditation of hurting yogis is closest."
        , "One mediocre silence i give you: meet each other."
        , "You have to preach, and love blessing by your rising."
        , "Acceptance, resurrection and a boundless great unknown."
        , "Demissios mori, tanquam gratis buxum."
        , "Aye, ah."
        , "Stutter calmly like a salty dubloon."
        , "Devastation at the holodeck was the rumour of faith, avoided to a solid planet."
        , "Solitudos volare, tanquam brevis torquis."
        , "When mashing small shrimps, be sure they are room temperature."
        , "Try fluffing cheesecake garnished with cocktail sauce, blended with onion powder."
        , "You have to sit, and know core by your balancing."
        , "Gar, mighty lubber. you won't crush the pacific ocean."
    ];

    var opponent = {
        name: "Jackie Chan",
        avatar:  Metro.defaults.ChatAvatar
    };

    function onMessage(msg, el){
    }

    function sendMessage(msg){
        var chat = Metro.getPlugin("#chat", "chat");
        setTimeout(function(){
            var _m = {
                name: opponent.name,
                avatar: opponent.avatar,
                time: (new Date()),
                text: messages[$.random(0, messages.length - 1)],
                position: "left"
            };
            chat.add(_m);
        }, $.random(1000, 3000));
    }
</script>
</body>
</html>
